<template>
	<view class="app">

		<uni-row>
			<uni-col :span="24">
				<view>
					<!-- 放详情图 -->
					<swiper :indicator-dots="true" :interval="3000" :duration="1000" style="height: 500rpx;">
						<swiper-item v-for="i in imgList">
							<view class="swiper-item">
								<image :src="i.imgSrc" style="height: 500rpx;"></image>
							</view>
						</swiper-item>
					</swiper>
				</view>
				<uni-card>
					<view
						style="background-color: #ff5500;color: white;font-size: 40rpx;height: 100rpx;text-al; border-radius: 10rpx;">
						<uni-row>
							<uni-col :span="12" style="margin-top: 20rpx;">
								￥{{product.price}}
							</uni-col>
							<uni-col :span="5" :offset="7" style="margin-top: 20rpx;">
								<view v-if="product.ecss == 1" style="font-size: 30rpx;text-align: center;">
									品牌自营
								</view>
								<view v-else style="font-size: 30rpx;text-align: center;">
									代理销售
								</view>
							</uni-col>
						</uni-row>
					</view>
					<br>
					<view>小米14/16GB+512GB/雪山粉/徕卡镜头</view>
					<view></view>
				</uni-card>
				<uni-card>
					<uni-collapse>
						<uni-collapse-item title="可用优惠券" :show-animation="true">
							<view v-for="c in couponList">
								<uni-row>
									<uni-col :span="8">{{c.name}}</uni-col>
									<uni-col :span="11">{{c.value}}</uni-col>
									<uni-col :span="5"><button type="primary" @click="getCoupon(c.id)"
											size="mini">领取</button></uni-col>
								</uni-row>
							</view>
						</uni-collapse-item>
					</uni-collapse>
				</uni-card>
				<uni-card>
					<uni-collapse>
						<view style="color: red;">
							* 注意 : 商品一旦售出 非质量问题不售后
						
							
						</uni-collapse-item>
						</view>
					</uni-collapse>
				</uni-card>
				
			</uni-col>
		</uni-row>
		
		<uni-row style="margin-top: 400rpx;">
			<uni-col :span="24">
				<view class="bar">
					<uni-goods-nav class="bar" :options="options" :fill="true" :button-group="buttonGroup"
						@click="addCart" @buttonClick="addOrder" />
				</view>
			</uni-col>
		</uni-row>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				options: [{
						icon: 'chat-filled',
						text: '客服'
					},
					{
						icon: 'cart',
						text: '购物车',
						info: 2
					}
				],
				buttonGroup: [{
						text: '加入购物车',
						backgroundColor: 'linear-gradient(90deg, #FFCD1E, #FF8A18)',
						color: '#fff'
					},
					{
						text: '立即购买',
						backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
						color: '#fff'
					}
				],
				product: "",
				couponList: [],
				imgList: [],
				productId: "",
				couponId: ""
			}
		},
		methods: {
			back() {
				uni.reLaunch({
					url: "/pages/index/index"
				})
			},
			queryProductDetail(id) {
				uni.request({
					url: 'api/product-server/queryProductDetail',
					data: {
						"id": id
					},
					header: {
						"token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ6eU1hbmFnZSI6eyJpZCI6IjEiLCJtYW5hZ2VBY2NvdW50IjoiYWRtaW4iLCJtYW5hZ2VJbWciOiJ4eHh4eHh4eHh4eHh4eHh4IiwibWFuYWdlUm9sZUlkIjoiMSIsIm1hbmFnZU5pY2tOYW1lIjoiYWRtaW4iLCJtYW5hZ2VQaG9uZSI6IjE1NTQ1NDU2MDA1In19.vkU4COCFFY5hNawRPhZ2K7iqdL6rIrvnhCMJr2U9nLs"
					},
					success: (res) => {
						this.product = res.data.data.product;
						this.options[1].info=res.data.data.buyNum

					}
				})
			},
			queryDetailImgs(id) {
				uni.request({
					url: 'api/product-server/queryImgList',
					data: {
						"id": id
					},
					header: {
						"token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ6eU1hbmFnZSI6eyJpZCI6IjE4MjA3NzkzMTgxODg1NzY3NjgiLCJtYW5hZ2VBY2NvdW50IjoiY2oiLCJtYW5hZ2VOaWNrTmFtZSI6ImNqIn19.AI1W3jxpA1T1k438YI8weWTw_51jKU2uUQAjKKJ3Rig"
					},
					success: (res) => {
						this.imgList = res.data.data;
					}
				})
			},
			queryCoupon(id) {
				uni.request({
					url: 'api/product-server/queryCoupon',
					data: {
						"id": id
					},
					header: {
						"token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ6eU1hbmFnZSI6eyJpZCI6IjE4MjA3NzkzMTgxODg1NzY3NjgiLCJtYW5hZ2VBY2NvdW50IjoiY2oiLCJtYW5hZ2VOaWNrTmFtZSI6ImNqIn19.AI1W3jxpA1T1k438YI8weWTw_51jKU2uUQAjKKJ3Rig"
					},
					success: (res) => {
						this.couponList = res.data.data;
					}
				})
			},
			getCoupon(couponId) {
				uni.request({
					url: 'api/product-server/getCoupon',
					data: {
						"couponId": couponId
					},
					header: {
						"token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ6eU1hbmFnZSI6eyJpZCI6IjE4MjA3NzkzMTgxODg1NzY3NjgiLCJtYW5hZ2VBY2NvdW50IjoiY2oiLCJtYW5hZ2VOaWNrTmFtZSI6ImNqIn19.AI1W3jxpA1T1k438YI8weWTw_51jKU2uUQAjKKJ3Rig"
					},
					success: (res) => {
						if (res.data.code != 200) {
							uni.showToast({
								title: '请勿重复领取',
								icon: 'error',
								duration: 2000
							});
						}
						if (res.data.code == 200) {
							uni.showToast({
								title: '领取成功',
								icon: 'success',
								duration: 2000
							});
						}
					}
				})
			},
			addOrder(e) {

				if (e.index == 0) {
					//添加购物车
					uni.request({
						url: "api/product-server/addShoppingCart",
						method: "POST",
						data: this.product,
						header: {
							"token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ6eU1hbmFnZSI6eyJpZCI6IjE4MjA3NzkzMTgxODg1NzY3NjgiLCJtYW5hZ2VBY2NvdW50IjoiY2oiLCJtYW5hZ2VOaWNrTmFtZSI6ImNqIn19.AI1W3jxpA1T1k438YI8weWTw_51jKU2uUQAjKKJ3Rig"
						},
						success: (res) => {
							if (res.data.code == 200) {
								uni.showToast({
									title: '加入购物车成功!',
									icon: 'success',
									duration: 2000
								});
								this.options[1].info = res.data.data;
							}
						}
					})
				} else {
					//添加订单
					// var product = {}
					// product.id = this.productId;
					// product.buyNum = 1;
					uni.request({
						url: 'api/rabbit-server/addOrder',
						method: 'POST',
						data: [{
							"id": this.productId,
							"buyNum": 1
						}],
						header: {
							"token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ6eU1hbmFnZSI6eyJpZCI6IjE4MjA3NzkzMTgxODg1NzY3NjgiLCJtYW5hZ2VBY2NvdW50IjoiY2oiLCJtYW5hZ2VOaWNrTmFtZSI6ImNqIn19.AI1W3jxpA1T1k438YI8weWTw_51jKU2uUQAjKKJ3Rig"
						},
						success: (res) => {

							// 显示加载遮罩
							uni.showLoading({
								title: '加载中...',
								mask: true // 显示遮罩层，防止用户触摸屏幕
							});

							// 延迟3秒后隐藏加载遮罩
							setTimeout(function() {
								uni.hideLoading();
								uni.showToast({
									title: '下单成功',
									icon: 'success',
									duration: 2000
								});
								if (res.data.code == 200) {
									uni.navigateTo({
										url: "/pages/payOrder/payOrder?id=" + res.data.data,
									})
								} else {
									uni.showToast({
										title: '系统繁忙，请稍后再试',
										icon: 'error',
										duration: 2000
									});
								}
							}, 3000);








						}
					})
				}

			},
			addCart(e) {
				if (e.index == 0) {
					//跳转到客服
					uni.navigateTo({
						url: "/pages/customerService/customerService"
					})
				} else {
					//跳转到购物车
					uni.navigateTo({
						url: "/pages/shoppingCart/shoppingCart",
					})
				}
			}
		},
		onLoad(param) {
			this.productId = param.id
			this.queryProductDetail(param.id)
			this.queryCoupon(param.id);
			this.queryDetailImgs(param.id);
		},

	}
</script>

<style lang="scss">
	.app {
		position: relative;

	}

	.bar {
		position: fixed;
		z-index: 1000;
		/* 确保 bar 在其他元素之上 */
		display: flex;
		width: 100%;
	}
</style>